
<template>

<v-app>

  <v-container>
    <!-- 背景部分 -->
    <div
      style="position: absolute; top: 0; bottom: 0; right: 0; left: 0"
      :style="background"
    >
      <!-- 页面主体 -->
      <div>
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: auto;
          "
        >
          <!-- 左上题头 -->
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin-top: 40px;
              margin-left: -450px;
            "
          >
            <img src="@/assets/logobit.png" />
            <div>
              <span
                style="
                  color: grey;
                  font-size: 28px;
                  margin-left: 20px;
                  margin-right: 20px;
                  font-weight: 500;
                "
                >|</span
              >
              <span
                style="
                  font-size: 23px;
                  font-weight: 900;
                  font-family: Microsoft Yahei;
                "
                >统一身份认证</span
              >
            </div>
          </div>
          <!-- 左上题头 -->

          <!-- 中间图片以及登录框 -->
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: flex-start;
            "
          >
            <!-- 图片 -->
            <img
              style="margin-right: 50px"
              src="@/assets/sea.jpeg"
              width="550px "
            />
            <!-- 图片 -->

            <!-- 主登陆框和"关于"两个card -->
            <div
              style="
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                margin-top: 50px;
              "
            >
              <v-card
                style="display: flex; flex-direction: column"
                height="350px"
                width="380px"
                elevation="24"
              >
                <!--tabs here-->
                <v-tabs
                  style="margin-top: 5px; margin-left: 30px; width: 100px"
                >
                  <v-tab
                    style="
                      font-size: 18px;
                      font-weight: 900;
                      font-family: Microsoft Yahei;
                      color: darkgreen;
                      margin-top: 10px;
                      padding: 0px;
                      letter-spacing: 0px;
                    "
                    >账号登陆
                  </v-tab>
                </v-tabs>
                <hr
                  style="
                    margin-left: 120px;
                    margin-right: 50px;
                    border-bottom: 0px;
                    opacity: 0.3;
                  "
                />
                <!--tabs here-->
                <!--forms here-->
                <template>
                  <v-form ref="form" lazy-validation>
                    <div
                      style="
                        display: flex;
                        flex-direction: row;
                        margin-top: 10px;
                      "
                    >
                      <v-icon style="margin-left: 27px; margin-right: 5px"
                        >mdi-account-outline</v-icon
                      >
                      <!--这里可以用border属性写一个边框-->
                      <v-text-field
                        style="margin-right: 50px"
                        v-model="username"
                        required
                      >
                        <template v-slot:label>
                          <!--这里重写了label-->
                          <div
                            style="
                              color: gray;
                              margin-left: 2px;
                              margin-top: 1px;
                              font-size: 14px;
                              font-weight: 700;
                              font-family: Microsoft Yahei;
                            "
                          >
                            请输入学号/工号
                          </div>
                        </template>
                      </v-text-field>
                    </div>

                    <div
                      style="
                        display: flex;
                        flex-direction: row;
                        margin-top: -10px;
                      "
                    >
                      <v-icon style="margin-left: 27px; margin-right: 5px"
                        >mdi-lock-open-outline</v-icon
                      >
                      <v-text-field
                        style="margin-right: 50px"
                        v-model="password"
                        type="password"
                      >
                        <template v-slot:label>
                          <div
                            style="
                              color: gray;
                              margin-left: 2px;
                              margin-top: 1px;
                              font-size: 14px;
                              font-weight: 700;
                              font-family: Microsoft Yahei;
                            "
                          >
                            请输入密码
                          </div>
                        </template>
                      </v-text-field>
                    </div>
                  </v-form>
                </template>

                <v-checkbox
                  style="margin-left: 27px; margin-top: 0px"
                 
                >
                  <template v-slot:label>
                    <div
                      style="
                        color: black;
                        margin-left: 5px;
                        font-size: 15px;
                        font-weight: 700;
                        font-family: Microsoft Yahei;
                      "
                    >
                      7天免登录
                    </div>
                  </template>
                </v-checkbox>
                <p
                  style="
                    font-size: 1px;
                    position: absolute;
                    top: 65%;
                    left: 36%;
                  "
                >
                  {{ wronginfo }}
                </p>
                <v-btn
                  x-small
                  @click="login"
                  color="#1B5E20"
                  class="mr-4"
                  width="303px"
                  height="40px"
                  style="margin-left: 29px; margin-top: 10px"
                >
                  <span
                    style="
                      font-size: 16px;
                      color: white;
                      font-weight: 800;
                      font-family: Microsoft Yahei;
                    "
                    @click="login"
                    >登 陆</span
                  >
                </v-btn>

                <div style="margin-top: 20px; margin-bottom: 20px">
                  <a href="" style="text-decoration: none"
                    ><span style="color: grey; font-size: 15px"
                      >忘记密码</span
                    ></a
                  >
                  <span style="margin-left: 5px; margin-right: 5px">|</span>
                  <a href="" style="text-decoration: none"
                    ><span style="color: grey; font-size: 15px"
                      >注册激活</span
                    ></a
                  >
                </div>
              </v-card>

              <v-card
                elevation="24"
                style="margin-top: 20px; margin-bottom: 10px"
              >
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    margin-top: 10px;
                    margin-bottom: 10px;
                  "
                >
                  <span
                    style="
                      font-size: 14px;
                      color: black;
                      font-weight: 700;
                      font-family: Microsoft Yahei;
                      margin-right: 90px;
                    "
                    >关于统一身份认证</span
                  >
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      font-size: 14px;
                      color: green;
                      font-weight: 700;
                      font-family: Microsoft Yahei;
                    "
                    >点击查看</a
                  >
                </div>
              </v-card>
            </div>
            <!-- 主登陆框和"关于"两个card -->
          </div>
        </div>
        <!-- 页面主体 -->
        <!-- 底部版权提示 -->
        <div
          style="
            width: 100%;
            text-align: center;
            overflow: auto;
            margin-top: 100px;
          "
        >
          <span class="bottom_text" style="margin-left: 0px"
            >北京理工大学版权所有</span
          >
          <span class="bottom_text">技术支持：网络信息技术中心</span>
          <span class="bottom_text"> 联系电话：68914833</span>
        </div>
        <!--底部版权提示-->
      </div>
    </div>
  </v-container>
</v-app>
</template>

<script>

import * as axios from "axios";

import global_ from './../components/common'
export default {
  name: 'login',
  

  components: {
    
  },

  data: () => ({
    //
    
    username: "",
    password: "",
    result: [],
    wronginfo: "",
    background: {
      backgroundImage: "url(" + require("@/assets/background11.png") + ")",
      backgroundPosition: "center",
      backgroundSize: "cover",
    },
  }),
   methods: {
    login() {
      axios
        .post("http://localhost:8888/login", {
          username: this.username,
          password: this.password,
        })
        .then((response) => {
          this.result = response;
          if (this.result.data.code == "-1") this.wronginfo = "账号或密码错误";
          else if (this.result.data.code == "01") {
            this.wronginfo = "账号或密码正确";
            this.$router.push({ path: "/Mainpage" });
            global_.ISLOGIN=true;
          } else {
            this.wronginfo = "Unknown Error";
            global_.ISLOGIN=false;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
